<template>
  <div class="category-nav">
    <div v-for="(category, index) in categories"
         :key="index"
         class="category-section" v-if="category.articleList.length>0">
      <div class="section-header">
        <div class="header-left">
          <i class="category.icon"></i>
          <h2 class="section-title">{{ category.name }}</h2>
        </div>
        <div class="more-link" @click.prevent="handleMoreClick(category)">
          <span>查看更多</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="cards-container">
        <content-card v-for="(item, idx) in category.articleList"
                     :key="idx+'a'"
                     :item="item"
                     class="category-card"
                     @click="handleCardClick(item)"
                     @like="handleLike(index, idx)"
                     @imageLoad="handleImageLoad(index, idx)"/>
      </div>
    </div>
  </div>
</template>

<script>
import ContentCard from './common/ContentCard.vue'
import {getRecommendArticleList} from '@/api/portalAPI'
export default {
  name: 'CategoryNav',
  components: {
    ContentCard
  },
  data() {
    return {
      categories: []
    }
  },
  mounted() {
    this.getRecommendArticle();
  },
  methods: {
   async getRecommendArticle(){
     try{
      const {code,data,msg}=await getRecommendArticleList();
      if (code===0){
        data.forEach(item => {
          item.loaded= false
          item.articleList = item.articleList || [];
        });
        this.categories=data;
      }else {
        console.error('Error fetching articles:', msg);
      }
     }catch (e){
       console.error('API call failed:', e);
     }

    },
    handleCardClick(item) {
      // 处理卡片点击
      this.$router.push(`/detail/${item.id}`)
    },
    handleImageLoad(categoryIndex, itemIndex) {
      this.$set(
        this.categories[categoryIndex].articleList[itemIndex],
        'loaded',
        true
      )
    },
    handleLike(categoryIndex, itemIndex) {
      const item = this.categories[categoryIndex].articleList[itemIndex]
      this.$set(item, 'liked', !item.liked)
      // 更新点赞数
      if (item.liked) {
        item.likes = (parseInt(item.likes) + 1).toString()
      } else {
        item.likes = (parseInt(item.likes) - 1).toString()
      }
    },

    handleMoreClick(item) {
      console.log('Navigating to category:', item.id); // 调试信息
      this.$router.push({ name: 'CategoryMore', params: { id: item.id } });
    }
  }
}
</script>

<style scoped>
.category-nav {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  overflow-x: hidden; /* 防止横向滚动 */
}

.category-section {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-left i {
  font-size: 24px;
  color: var(--primary-color);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
}

.more-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary-color);
  cursor: pointer;
  transition: all 0.3s;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
}

.more-link:hover {
  color: var(--primary-color);
  background: var(--hover-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.15);
}

.more-link i {
  font-size: 12px;
  transition: transform 0.3s;
}

.more-link:hover i {
  transform: translateX(3px);
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自适应列数 */
  gap: 20px;
  width: 100%; /* 确保宽度为100% */
}

/* 响应式布局调整 */
@media (max-width: 1400px) {
  .cards-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 992px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .category-section {
    padding: 20px;
  }

  .section-header {
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .category-nav {
    gap: 15px;
  }

  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .category-section {
    padding: 15px;
  }

  .section-header {
    margin-bottom: 12px;
  }

  .header-left i {
    font-size: 20px;
  }

  .section-title {
    font-size: 16px;
  }

  .more-link {
    padding: 4px 12px;
    font-size: 13px;
    gap: 4px;
  }

  .more-link i {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .category-nav {
    gap: 12px;
  }

  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .category-section {
    padding: 12px;
  }

  /* 调整卡片在移动端的样式 */
  :deep(.category-card) {
    .card-image {
      height: 120px;
    }

    .card-content {
      padding: 10px;
    }

    .card-title {
      font-size: 13px;
      margin-bottom: 6px;
      -webkit-line-clamp: 2;
    }

    .card-meta {
      font-size: 12px;
    }

    .meta-item {
      gap: 4px;
    }

    .meta-item i {
      font-size: 12px;
    }
  }

  .more-link {
    padding: 3px 10px;
    font-size: 12px;
  }

  .more-link i {
    font-size: 10px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
  .cards-container {
    gap: 8px;
  }

  .category-section {
    padding: 10px;
  }

  /* 调整卡片在超小屏的样式 */
  :deep(.category-card) {
    .card-image {
      height: 100px;
    }

    .card-content {
      padding: 8px;
    }

    .card-title {
      font-size: 12px;
      margin-bottom: 4px;
    }

    .card-meta {
      font-size: 11px;
    }
  }
}
</style>
